<template>
	<view class="container">
		<view class="header">
			<text class="title">作业管理</text>
		</view>
		
		<!-- 作业状态卡片 -->
		<view class="status-card">
			<view class="status-item">
				<text class="number">5</text>
				<text class="label">待完成</text>
			</view>
			<view class="status-item">
				<text class="number">12</text>
				<text class="label">已完成</text>
			</view>
			<view class="status-item">
				<text class="number">92%</text>
				<text class="label">完成率</text>
			</view>
		</view>
		
		<!-- 作业列表 -->
		<view class="homework-list">
			<view class="section-title">近期作业</view>
			<view class="homework-item" v-for="(item, index) in homeworkList" :key="index" @click="viewHomework(item)">
				<view class="homework-info">
					<text class="homework-name">{{ item.name }}</text>
					<text class="course-name">{{ item.course }}</text>
					<view class="deadline">
						<uni-icons type="calendar" size="14" color="#95a5a6"></uni-icons>
						<text>截止日期：{{ item.deadline }}</text>
					</view>
				</view>
				<view class="homework-status" :class="item.status">
					{{ item.statusText }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				homeworkList: [
					{
						id: 1,
						name: '人体解剖学作业一',
						course: '人体解剖学',
						deadline: '2024-03-20',
						status: 'pending',
						statusText: '待完成'
					},
					{
						id: 2,
						name: '临床诊断学测验',
						course: '临床诊断学',
						deadline: '2024-03-21',
						status: 'ongoing',
						statusText: '进行中'
					},
					{
						id: 3,
						name: '药理学实验报告',
						course: '药理学',
						deadline: '2024-03-22',
						status: 'completed',
						statusText: '已完成'
					}
				]
			}
		},
		methods: {
			viewHomework(homework) {
				uni.navigateTo({
					url: `/pages/homework/detail?id=${homework.id}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		background-color: #f8f9fc;
		min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
		
		.title {
			font-size: 36rpx;
			font-weight: 600;
			color: #2c3e50;
		}
	}
	
	.status-card {
		display: flex;
		justify-content: space-around;
		background: #fff;
		padding: 30rpx;
		border-radius: 16rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		
		.status-item {
			text-align: center;
			
			.number {
				font-size: 36rpx;
				font-weight: 600;
				color: #4b7bec;
				display: block;
				margin-bottom: 8rpx;
			}
			
			.label {
				font-size: 24rpx;
				color: #7f8c8d;
			}
		}
	}
	
	.homework-list {
		.section-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #2c3e50;
			margin-bottom: 20rpx;
		}
		
		.homework-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			padding: 20rpx;
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
			
			.homework-info {
				flex: 1;
				
				.homework-name {
					font-size: 28rpx;
					font-weight: 500;
					color: #2c3e50;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.course-name {
					font-size: 24rpx;
					color: #7f8c8d;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.deadline {
					display: flex;
					align-items: center;
					font-size: 24rpx;
					color: #95a5a6;
					
					text {
						margin-left: 8rpx;
					}
				}
			}
			
			.homework-status {
				font-size: 24rpx;
				padding: 4rpx 16rpx;
				border-radius: 100rpx;
				
				&.pending {
					color: #f1c40f;
					background: rgba(241, 196, 15, 0.1);
				}
				
				&.ongoing {
					color: #4b7bec;
					background: rgba(75, 123, 236, 0.1);
				}
				
				&.completed {
					color: #2ecc71;
					background: rgba(46, 204, 113, 0.1);
				}
			}
		}
	}
</style> 